<template>
  <div class="web-questions-block z-1001">
    <ul
      v-if="questionsList.length"
      ref="ulRef"
      :class="{ 'animation': isNeed }"
      class="web-questions-block-body"
      :style="`transform: translate(0, ${ulPosition}px)`"
      @mouseout="touchEnd"
      @mouseover="touchStart"
    >
      <li
        v-for="item in questionsList"
        :key="item.id"
        class="items"
        @click="$emit('itemClick', item.question_title)"
      >
        <div class="item-body">
          <div class="bg"></div>
          <div class="z-1 relative">{{ item.question_title }}</div>
        </div>
      </li>
      <div class="w-full"></div>
      <li
        v-for="item in questionsList"
        :key="item.id"
        class="items"
        @click="$emit('itemClick', item.question_title)"
      >
        <div class="item-body">
          <div class="bg"></div>
          <div class="z-1 relative">{{ item.question_title }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script
  lang="ts"
  name="WebQuestionBlock"
  setup
>
import { useTtsaStore } from '@/store/ttsa'

defineEmits(['itemClick'])

// 非响应式变量
let timer = null // 问题列表动画定时器
const duration = 4000 // 问题滚动间隔
const ulPosition = ref(0)
const ulRef = ref(null)
const isNeed = ref(true) // 动画class是否需要添加

// stores
const ttsaStore = useTtsaStore()

// computeds
const questionsList = computed(() => ttsaStore.questions)

// 清除问题列表动画
const clearAnimation = () => {
  clearInterval(timer)
}
// 用户hover问题列表时取消动画
const touchStart = () => {
  clearAnimation()
}
// 用户离开问题列表结束时初始化动画
const touchEnd = () => {
  initAnimation()
}
// 初始化动画
const initAnimation = () => {
  const root = ulRef.value
  const list = ulRef.value.children
  // 获取计算单个li内容高度
  const eleHeight = list[0].clientHeight
  const liMargin = Number(getComputedStyle(list[0]).marginBottom.slice(0, -2) || 0)
  const boxHeight = eleHeight + liMargin
  const ulHeight = root.clientHeight
  timer = setInterval(() => {
    isNeed.value = true
    if (-ulPosition.value === ulHeight / 2) {
      isNeed.value = false
      ulPosition.value = 0
      setTimeout(() => {
        isNeed.value = true
        ulPosition.value = 0 - boxHeight
      }, 600)
    } else {
      ulPosition.value = ulPosition.value - boxHeight
    }
  }, duration)
}

onMounted(() => {
  initAnimation()
})

onBeforeUnmount(() => {
  clearAnimation()
})

</script>

<style
  lang="scss"
  scoped
>
.web-questions-block {
  @apply absolute overflow-hidden;
  left: 50%;
  margin-left: -400px;
  height: 90px;
  width: 800px;
  padding: 30px 0 20px;
  bottom: 118px;
  mask: linear-gradient(transparent 0, black 10px, black 90%, transparent 100%);
  -webkit-mask: linear-gradient(transparent 0, black 10px, black 95%, transparent 100%);

  .animation {
    transition: all 2s;
  }

  .web-questions-block-body {
    @apply flex flex-wrap justify-center overflow-x-hidden px-0 whitespace-nowrap;

    transform: translate(0, 0);
    scrollbar-width: none;
    z-index: 0;

    .items {
      @apply relative flex cursor-pointer text-white;
      margin-bottom: 30px;

      &:active {
        transform: scale(0.95);
      }

      .item-body {
        @apply relative;
        margin: 0 7.5px;
        background: rgba(55, 106, 174, 0.2);
        border-radius: 30px;
        font-size: 16px;
        padding: 8px 20px;

        &::after {
          @apply absolute top-0px;
          content: '';
          width: 70%;
          left: 50%;
          margin-left: -35%;
          border-top: 1px solid;
          border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
        }

        .bg {
          @apply absolute backdrop-filter backdrop-blur-3px h-full w-full top-0 left-0;
          content: '';
          border-radius: 30px;
        }

        &:hover {
          background: linear-gradient(90deg, rgba(119, 154, 249, 0.5) 0%, rgba(119, 154, 249, 0.8) 49%, rgba(119, 154, 249, 0.4) 100%);

          .bg {
            @apply backdrop-blur-8px;
          }
        }
      }
    }
  }
}
</style>
